<template>
  <div>
    <div class="top">
      <Slider v-bind="setting"></Slider>
    </div>
    <div class="recomand">
      <Cover :cover="cover" show="ture" />
    </div>
    <div class="proper">
      <h1 class="title">独家放送</h1>
      <div class="properContent">
        <div class="proper-item" v-for="item in privatecontent" :key="item.id">
          <div>
            <img class="icon" src="../../assets/playmv.png" alt />
          </div>
          <img class="mvimg" v-lazy="item.picUrl" alt />
          <p>{{ item.copywriter }}</p>
        </div>
      </div>
    </div>
    <div class="top">
      <Newsong />
    </div>
    <div class="top">
      <Cover width="32%" title="推荐mv" :cover="mv" :show="false" :click="false" />
    </div>
    <div class="top">
      <h1 class="title">主播电台</h1>
      <div class="dj">
        <div v-for="item in dj" :key="item.id" class="dj-content">
          <div class="dj-img">
            <img v-lazy="item.picUrl" alt />
            <p>{{ item.category }}</p>
          </div>
          <span>{{ item.rcmdtext }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Slider from "vue-image-scroll";
import Cover from "./cover";
import Newsong from "./newsong";
export default {
  data() {
    return {
      setting: {
        styleObject: {
          width: "750",
          height: "250",
        }, //滚动框样式 宽度默认750px 高度默认250px 其余样式小驼峰命名
        image: [1, 2, 3, 4, 5, 6, 7, 8, 9], //图片数组
        interval: 4000, //滚动间隔,单位ms,默认2000
        imgStyle: {
          height: "225px",
          width: "525px",
        },
        autoRoll: true, //自动滚动
        direction: "left", //滚动方向, left or right
      },
      cover: {},
      privatecontent: {},
      mv: [],
      dj: {},
      load: "",
    };
  },
  components: {
    Slider,
    Cover,
    Newsong,
  },
  mounted() {
    this.load = this.$loading.show();
    this.$api
      .getBanner({
        type: 0,
      })
      .then((res) => {
        let img = [];
        res.map((item) => {
          img.push(item.imageUrl);
        });
        this.$set(this.setting, "image", img);
      });
    this.$api
      .getRecommend({
        limit: 9,
      })
      .then((res) => {
        this.cover = res.result;
        this.load.hide();
      });
    this.$api.privatecontent().then((res) => (this.privatecontent = res));
    this.$api.getmv().then((res) => {
      res.splice(3, 1);
      this.mv = res;
    });
    this.$api.getdj().then((res) => {
      this.dj = res;
      this.load.hide();
    });
  },
};
</script>
<style lang="less">
.top {
  margin-top: 20px;
}

.recomand {
  width: 760px;
}

.title {
  line-height: 40px;
  font-size: 20px;
  font-weight: 200;
  border-bottom: 1px solid #e1e1e2;
}

.proper {
  margin-top: 30px;

  .properContent {
    display: flex;
    justify-content: space-between;

    .proper-item {
      display: inline-block;
      font-size: 13px;
      margin-right: 20px;
      margin-top: 10px;
      position: relative;

      div {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        position: absolute;
        border: 1px solid white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 5px;

        .icon {
          width: 60%;
        }
      }

      &:nth-child(3) {
        margin-right: 0;
      }

      .mvimg {
        width: 100%;
        height: 100%;
        border: 1px solid #e1e1e2;
      }
    }
  }
}

.dj {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;

  .dj-content {
    position: relative;

    .dj-img {
      width: 140px;
      position: relative;

      img {
        width: 100%;
      }

      p {
        position: absolute;
        bottom: 5px;
        height: 20px;
        width: 100%;
        color: white;
        padding-left: 5px;
        font-size: 13px;
        background: linear-gradient(
          to top,
          rgba(100, 100, 100, 0.9),
          rgba(255, 255, 255, 0.1)
        );
      }
    }

    span {
      font-size: 13px;
      position: absolute;
    }
  }
}
</style>
